<template>
  <div id="app">
    <router-view/>
    <audio  ref="audio" id="audio" autoplay controls :src="`https://music.163.com/song/media/outer/url?id=${Id}.mp3`" style="display: none"></audio>
  </div>
</template>
<script>
export default {
  data() {
    return {
    }
  },
  computed:{
    Id(){
      return this.$store.getters.getid
    },
  },
  mounted() {
    this.$store.state.audio=document.getElementById('audio')
    this.$nextTick(()=>{
      //获取播放器.并处理时间
      this.$store.state.audio.addEventListener('timeupdate',()=>{
          var sum_m=Math.floor(this.$store.state.audio.duration/60);//总时间分
          var sum_s=Math.floor(this.$store.state.audio.duration%60);//总时间秒
          if (sum_m < 10) {
            sum_m = "0" + sum_m;
          }
          if (sum_s < 10) {
            sum_s = "0" + sum_s;
          }
          var cur_m=Math.floor(this.$store.state.audio.currentTime/60);//当前时间分
          var cur_s=Math.floor(this.$store.state.audio.currentTime%60);//总时间秒
          if (cur_m < 10) {
            cur_m = "0" + cur_m;
          }
          if (cur_s < 10) {
            cur_s = "0" + cur_s;
          }
          var ztiem=sum_m+':'+sum_s;//总播放时间
          var dtiem=cur_m+':'+cur_s;//当前播放时间
          this.$store.commit('setdtiem',dtiem)
          this.$store.commit('setztiem',ztiem)
          this.$store.commit('setmax',this.$store.state.audio.duration)
          this.$store.commit('setsize',this.$store.state.audio.currentTime)
        })
    })
  }
};
</script>